<template>
  <div style="height: 1024px">
    <!-- 分公司管理 -->
    <div>
      <div class="clearfix bf-top-button">
        <div class="float-l">
          <el-button type="primary" @click="showAdd">新增</el-button>
        </div>
        <div class="float-r">
          <div class="float-l">
            <el-input placeholder="请输入合同公司编号搜索" prefix-icon="el-icon-search" v-model="searchData" @keyup.enter.native="quickSearch">
            </el-input>
          </div>
          <div class="float-l padding-l">
            <el-button type="primary" @click="showSearch">高级筛选</el-button>
          </div>
        </div>
      </div>

      <bf-table
        :data="data"
        :setting="setting"
        :rowAction="rowAction"
        @editSubmit="editSubmit"
        @pageChange="pageChange"
        :editRules="editRules"
        ref="table">
      </bf-table>

    </div>
    <!-- 添加 -->
    <bf-table-add :editForm ='addSetting' ref='addRosterRef' @formSubmit='addCompany'  :editRules = "editRules"></bf-table-add>
    <!-- 高级搜索 -->
    <bf-table-search :editForm ='setting' ref='searchRosterRef' @formSubmit='searchRosterSubmit' ></bf-table-search>
    <!-- 编辑 -->
    <bf-table-edit :editForm ='setting' ref='editRosterRef' @formSubmit='editRosterSubmit'  :editRules = "editRules" ></bf-table-edit>
    <!--详情-->
    <bf-table-detail ref="bfTableDetail" :editForm="setting"></bf-table-detail>

  </div>
</template>

<script>
import {
  getCompanyApi,
  addCompanyApi,
  updateCompany,
  deleteCompanyApi
} from './api';
export default {
  data() {
    return {
      searchData: '',
      data: {
        list: [],
        total: 0
      },
      rowAction: [
        {
          label: '编辑',
          click: item => {
            this.$refs.editRosterRef.show(item.scope);
          }
        },
        {
          label: '删除',
          click: item => {
            this.$refs.table.showDelete(item);
          }
        }
      ],
      addSetting: [
        {
          field: 'code',
          title: '公司编号',
          type: 'text'
        },
        {
          field: 'companyName',
          title: '公司名称',
          type: 'text',
          searchable: true
        }, {
          field: 'addr',
          title: '公司地址',
          type: 'text',
          searchable: true
        },
        {
          field: 'legalPerson',
          title: '公司法人',
          type: 'text',
          searchable: true
        }

      ],
      setting: [
        {
          field: 'code',
          title: '公司编号',
          type: 'text',
          searchable: false,
          disableEdit: true
        },
        {
          field: 'companyName',
          title: '公司名称',
          type: 'text',
          searchable: true
        },
        {
          field: 'addr',
          title: '公司地址',
          type: 'text',
          searchable: true
        }, {
          field: 'legalPerson',
          title: '公司法人',
          type: 'text',
          searchable: true
        }
      ],
      editRules: {
        code: [
          {
            required: true,
            message: '请输入合同公司编号',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20个字符',
            trigger: 'blur'
          }
        ],
        companyName: [
          {
            required: true,
            message: '请输入合同公司名称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20个字符',
            trigger: 'blur'
          }
        ],
        addr: [
          {
            required: true,
            message: '请输入合同公司地址',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20个字符',
            trigger: 'blur'
          }
        ],
        legalPerson: [
          {
            required: true,
            message: '请输入法人',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 100,
            message: '长度在 2 到 100个字符',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  mounted: function() {
    this.getCompany();
  },
  methods: {
    getCompany(params) {
      if (!params) {
        params = {}
      }
      if (!params.page) {
        params.page = 1
      }
      getCompanyApi(params).then(response => {
        if (response.success) {
          this.data = response;
          this.$refs.searchRosterRef.hiden()
        }
      })
    },
    addCompany(params) {
      addCompanyApi(params).then(response => {
        if (response.success) {
          this.$message({
            message: '新增合同公司成功',
            type: 'success'
          });
          this.$refs.addRosterRef.hiden();
          this.getCompany();
        }
      });
    },
    editRosterSubmit(form) {
      updateCompany(form).then(response => {
        if (response.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.$refs.editRosterRef.hiden();
          this.getCompany();
        }
      });
    },
    deleteCompany(code) {
      deleteCompanyApi(code).then(response => {
        this.getCompany();
      });
    },
    editSubmit(params, formType, formList) {
      if (formType === 'add') {
        this.addCompany(params);
      }
      if (formType === 'delete') {
        this.deleteCompany(params.row.code);
      }
    },
    searchRosterSubmit(form) {
      this.getCompany(form)
    },
    pageChange(pageObj) {
      // console.log(pageObj)
      this.getCompany(pageObj)
    },
    showSearch() {
      this.$refs.searchRosterRef.show();
    },
    showAdd() {
      this.$refs.addRosterRef.show();
    },
    quickSearch() {
      const params = {
        code: this.searchData
      };
      this.getCompany(params);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.title {
  margin-top: 65px;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}

.desc {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
